<template>
  <div>
    <Loading v-if="!slide.backgroundImg" />
    <div class="slide-container">
      <my-slide
        class="my-slide"
        :autoplay="true"
        :duration="4000"
        :hasDot="true"
        :hasDirector="true"
      >
        <slide-item :key="0">
          <img :src="slide.backgroundImg" />
          <div class="text">
            <h1>
              <span
                ><i>{{ spliceText(0) }}</i></span
              >
              <span
                ><i>{{ spliceText(2) }},</i></span
              >
              <span
                ><i>{{ spliceText(5) }}</i></span
              >
              <span
                ><i>{{ spliceText(7) }}</i></span
              >
            </h1>
            <p>{{ slide.welcome }}</p>
          </div>
        </slide-item>
        <slide-item :key="1">
          <video :src="slide.videoUrl" muted autoplay loop playsinline></video>
          <!-- <img :src="slide.gifUrl" /> -->
          <div class="text-scroll" ref="textScrollRef">
            <h2>
              {{ slide.title2 }}
              <div class="mask">
                <span data-show> {{ slide.feature1 }} </span>
                <span> {{ slide.feature2 }} </span>
                <span> {{ slide.feature3 }} </span>
              </div>
            </h2>
          </div>
        </slide-item>
      </my-slide>
    </div>
  </div>
</template>

<script>
import MySlide from "../../libs/WeisonUI/Slide";
import SlideItem from "../../libs/WeisonUI/Slide/SlideItem";
import http from "../../services/http";
import { reactive, toRefs, ref } from "vue";
export default {
  name: "Slide",
  components: {
    SlideItem,
    MySlide,
  },
  setup() {
    const state = reactive({
      slide: {},
    });
    //请求接口获取数据
    const getData = async () => {
      const { data: res } = await http.get("index");
      state.slide = res.slideData;
      //首次进入分发访客id
      const visitor_id = localStorage.getItem("visitor_id");
      visitor_id || localStorage.setItem("visitor_id", res.newVisitorInfo._id);
    };
    getData();
    //视屏页面滚动文字效果
    const textScrollRef = ref(null);
    setInterval(() => {
      const textScroll = textScrollRef.value;
      const show = textScroll.querySelector("span[data-show]");
      const next =
        show.nextElementSibling || textScroll.querySelector("span:first-child");
      const up = textScroll.querySelector("span[data-up]");
      if (up) {
        up.removeAttribute("data-up");
      }
      show.removeAttribute("data-show");
      show.setAttribute("data-up", "");
      //将下一个元素移动到中间
      next.setAttribute("data-show", "");
    }, 1150);
    const spliceText = (i) => {
      const text = state.slide.title || "";
      return text.substr(i, 2);
    };
    return {
      ...toRefs(state),
      textScrollRef,
      spliceText,
    };
  },
};
</script>
